<script setup>
import { Checked, Failed, ArrowRight, Clock, Bicycle, DocumentChecked, DocumentDelete, Document, Plus } from "@element-plus/icons-vue";
import { useDateStore } from "@/stores/index";
import CardComponent from "@/components/CardComponent.vue";
import { ref } from "vue";
const dateStore = useDateStore()
const segmentValue = ref("待接单")
const segmentOptions = ['待接单', '待派送']
</script>

<template>
  <div>
    <div class="today-data">
      <CardComponent cardHeight="200px" is-need-head=true card-width="100%">
        <template #header>
          <span class="card-header">
            <span>今日数据-{{ dateStore.useFormatTime }}</span>
            <span class="card-header-right">
              详细数据
              <el-icon>
                <ArrowRight />
              </el-icon>
            </span>
          </span>
        </template>
        <template #default>
          <div class="card-body">
            <CardComponent cardHeight="100px" isNeedHead=true cardWidth="15%">
              <template #header>
                营业额
              </template>
              <template #default>
                <b>￥252</b>
              </template>
            </CardComponent>
            <CardComponent card-height="100px" is-need-head=true card-width="15%">
              <template #header>
                有效订单
              </template>
              <template #default>
                <b>2</b>
              </template>
            </CardComponent>
            <CardComponent card-height="100px" is-need-head=true card-width="15%">
              <template #header>
                订单完成率
              </template>
              <template #default>
                <b>100%</b>
              </template>
            </CardComponent>
            <CardComponent card-height="100px" is-need-head=true card-width="15%">
              <template #header>
                评价客单价
              </template>
              <template #default>
                <b>￥152</b>
              </template>
            </CardComponent>
            <CardComponent card-height="100px" is-need-head=true card-width="15%">
              <template #header>
                新增用户
              </template>
              <template #default>
                <b>1</b>
              </template>
            </CardComponent>
          </div>
        </template>
      </CardComponent>
    </div>
    <div class="order-manage" style="margin-top: 10px;">
      <CardComponent is-need-head=true card-height="200px" card-width="100%">
        <template #header>
          <span class="card-header">
            <span>订单管理-{{ dateStore.useFormatTime }}</span>
            <span class="card-header-right">
              <span>
                订单明细
              </span>
              <span style="display: flex;justify-content: center;align-items: center;">
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </span>
            </span>
          </span>
        </template>
        <template #default>
          <div class="card-body">
            <CardComponent card-height="100px" :is-need-head=false card-width="15%">
              <span class="manage-item">
                <span class="icon-desc">
                  <el-icon>
                    <Clock />
                  </el-icon>
                  待接单
                </span>
                <span>
                  <b style="color: red;">0</b>
                </span>
              </span>
            </CardComponent>
            <CardComponent card-height="100px" :is-need-head=false card-width="15%">
              <span class="manage-item">
                <span class="icon-desc">
                  <el-icon>
                    <Bicycle />
                  </el-icon>
                  待派送
                </span>
                <span>
                  <b style="color: red;">0</b>
                </span>
              </span>
            </CardComponent>
            <CardComponent card-height="100px" :is-need-head=false card-width="15%">
              <span class="manage-item">
                <span class="icon-desc">
                  <el-icon>
                    <DocumentChecked />
                  </el-icon>
                  已完成
                </span>
                <span>
                  <b>2</b>
                </span>
              </span>
            </CardComponent>
            <CardComponent card-height="100px" :is-need-head=false card-width="15%">
              <span class="manage-item">
                <span class="icon-desc">
                  <el-icon>
                    <DocumentDelete />
                  </el-icon>
                  已取消
                </span>
                <span>
                  <b>0</b>
                </span>
              </span>
            </CardComponent>
            <CardComponent card-height="100px" :is-need-head=false card-width="15%">
              <span class="manage-item">
                <span class="icon-desc">
                  <el-icon>
                    <Document />
                  </el-icon>
                  全部订单
                </span>
                <span>
                  <b>2</b>
                </span>
              </span>
            </CardComponent>
          </div>
        </template>
      </CardComponent>
    </div>
    <div style="margin-top: 10px; display: flex;justify-content: space-between;">
      <span class="menu-overview" style="width: 49%;">
        <CardComponent is-need-head=true card-height="200px" card-width="45%">
          <template #header>
            <span class="card-header">
              <span>菜品总览</span>
              <span class="card-header-right">
                菜品管理
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </span>
            </span>
          </template>
          <template #default>
            <div class="overall-items  card-body">
              <!-- <div> -->
              <CardComponent :isNeedHead=false card-height="100px" card-width="30%">
                <span>
                  <el-icon>
                    <Checked />
                  </el-icon>
                  已销售
                </span>
                <span><b>24</b></span>
              </CardComponent>
              <!-- </div> -->
              <!-- <div> -->
              <CardComponent :isNeedHead=false card-height="100px" card-width="30%">
                <span>
                  <el-icon>
                    <Failed />
                  </el-icon>
                  已停售
                </span>
                <span><b>1</b></span>
              </CardComponent>
              <!-- </div> -->
              <!-- <div> -->
              <el-button size="large" :icon="Plus"
                style="display: flex; flex-direction: column;height: 70px;width: 70px; gap: 10px;">新增菜品</el-button>
              <!-- </div> -->
            </div>
          </template>
        </CardComponent>
      </span>
      <span class="package-overview" style="width: 49%;">
        <CardComponent is-need-head=true card-height="200px" card-width="45%">
          <template #header>
            <span class="card-header">
              <span>套餐总览</span>
              <span class="card-header-right">
                套餐管理
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </span>
            </span>
          </template>
          <template #default>
            <span class="overall-items card-body">
              <CardComponent :isNeedHead=false card-height="100px" card-width="30%">
                <span>
                  <el-icon>
                    <Checked />
                  </el-icon>
                  已销售
                </span>
                <span><b>24</b></span>
              </CardComponent>
              <CardComponent :isNeedHead=false card-height="100px" card-width="30%">
                <span>
                  <el-icon>
                    <Failed />
                  </el-icon>
                  已停售
                </span>
                <span><b>0</b></span>
              </CardComponent>
              <el-button size="large" :icon="Plus"
                style="display: flex; flex-direction: column;height: 70px;width: 70px; gap: 10px;">新增套餐</el-button>
            </span>
          </template>
        </CardComponent>
      </span>
    </div>
    <div style="margin-top: 10px;">
      <CardComponent :isNeedHead="true" card-height="700px" card-width="100%">
        <template #header>
          <div class="card-header">
            <div style="line-height: 40px;">订单信息</div>
            <div>
              <div class="flex flex-col items-start gap-4">
                <el-segmented v-model="segmentValue" :options="segmentOptions" size="large" />
              </div>
            </div>
          </div>
        </template>
        <template #default>
          <el-empty description="description" />
        </template>
      </CardComponent>
    </div>
  </div>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.card-header-right {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.card-body {
  display: flex;
  justify-content: space-around;
}

.card-body .el-card {
  background-color: #fffff4;
}

.icon-desc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.manage-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

:deep(.menu-overview .el-button span) {
  margin: 0;
}

:deep(.package-overview .el-button span) {
  margin: 0;
}

.overall-items {
  display: flex;
  align-items: center;
}

:deep(.card-body .el-card__body) {
  height: 100%;
}

:deep(.overall-items .el-card__body) {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
